<template>
  <div class="file-box f-r a-c">
    <el-image :src="fileIcon" class="f-s" style="width: 30px;height: 30px" />
    <el-link type="primary" style="line-height: 14px;" @click="download">{{ file.fileName }}</el-link>

  </div>
</template>

<script>
import { downloadFile } from '@/utils/request'

import File_Icon from '@/assets/file.png'
import Excel_Icon from '@/assets/excel.png'
import Word_Icon from '@/assets/word.png'
export default {
  name: 'FileView',
  props: {
    file: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {
    fileIcon() {
      if (['jpeg', 'gif', 'png'].indexOf(this.file.fileType) > -1) return File_Icon
      if (['xls', 'xlsx'].indexOf(this.file.fileType) > -1) return Excel_Icon
      if (['doc', 'docx'].indexOf(this.file.fileType) > -1) return Word_Icon
      return File_Icon
    }
  },
  methods: {
    download() {
      if (!this.file.fileUrl) return this.$message.error('下载地址为空')
      downloadFile(this.file.fileUrl, this.file.fileName)
    }
  }
}
</script>

<style scoped lang="scss">
.file-box {
  height: 40px;
 padding-right: 10px;
  background: #FFFFFF;
  border-radius: 3px;
  opacity: 1;
  border: 1px solid #929090;
  .el-link {
    color: #929090;
  }
}
</style>
